// 因为我们在webpack之中直接引入 jQuery 命名为 $ , 所以我们在项目之中可以直接使用 $ , 不需要额外的引入; 
$( function(){
    function handlerJsonpRequest(){
        let options = {
            url: 'https://www.baidu.com/sugrec',
            data: {
                prod: 'pc',
                from: 'pc_web',
                wd: $('#searchKeywords').val()
            },
            dataType: 'jsonp',
            jsonp: 'cb'
        }
        let def = $.ajax(options)

        def.done(function (data) {
            handlerJsonpResponse(data)
        })
    }
    
    function handlerJsonpResponse(data) {
        if (data.g === undefined) {
            $('#list').html(`<li>您要找的${$('#searchKeywords').val()}商品不存在</li> <span>×</span>`)
        }else {
            let  html =  data.g.map(itme => `<li>${itme.q}</li>`).join('')
            $('#list').css({
                display:'block'
            }).html(html + `<span>×</span>`)
        }
        if($('#searchKeywords').val()===''){
            $('#list').css({
                display:'none'
            })
        }
        $('#list li:eq(0)').attr('class','active')
        
        $('#list li').mouseover(function(){
            $('#list li').attr('class','').eq($(this).index()).attr('class','active')
        })
        $('#list span').click(function(){
            $('#list').css({
                display:'none'
            })
        })

    }
    $('#searchKeywords').on('input', handlerJsonpRequest)
})